<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css"/>
		<style type="text/css">
			* { touch-action: pan-y; } 
			.tou{
				width: 100%;
				height: auto;
				padding: 30px 40px;
			}
			.qian{
				font-size: 25px;
				font-weight: 500;
				font-family: "微软雅黑";
				text-align: center;
			}
			.text{
				width: 100%;
				text-align: center;
				padding: 10px;
				color: #7c7c7c;
			}
			.list{
				width: 100%;
				padding: 10px;
				border-bottom: 1px solid #CCCCCC;
			}
			.list2{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px;
			}
			.b{
				color: #007AFF;
			}
			.list{
				display: flex;
				width: 100%;
				height: auto;
			}
			.dd-list{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex-direction: column;
				width: 100%;
				margin-bottom: 20px;
				border-radius: 10px;
				background-color: white;
			}
			
			.fimg{
				width: 50px;
				height: 50px;
			}
			.fimg img{
				width: 50px;
				height: 50px;
			}
			.ftext{
				width: 65%;
				word-break: break-all;
				padding-left: 0.5em;
			}
			.fc-end{
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				flex-direction: column;
				min-height: 55px;
			}
			.fr-e{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				padding:6px 10px;
			}
			.fr-f{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				padding: 10px;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
			}
			.fr-b{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px;
			}
			.m10{
				margin: 0 10px;
			}
			.mui-content{
				padding: 0.5em;
			}
			.mui-segmented-control{
				margin: 0.5em 0;
			}
			*{
				color: #676664;
			}
			.mui-segmented-control .mui-control-item.mui-active {
			    color: #7DB1FD;
			    background-color: #fff;
			}
			.mui-segmented-control {
			    font-size: 15px;
			    font-weight: 400;
			    position: relative;
			    display: table;
			    overflow: hidden;
			    width: 100%;
			    table-layout: fixed;
			    border: 1px solid #fff;
			    border-radius: 3px;
			    background-color: #fff;
			    -webkit-touch-callout: none;
			}
			.mui-segmented-control .mui-control-item {
			    line-height: 38px;
			    display: table-cell;
			    overflow: hidden;
			    width: 1%;
			    -webkit-transition: background-color .1s linear;
			    transition: background-color .1s linear;
			    text-align: center;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    color: #666;
			 /*   border-color: #7DB1FD;*/
			    border-left: 1px solid #7DB1FD;
			}
			.item{
				font-family:"微软雅黑";
				font-size: 0.9em;
			}
			.but{ border:1px solid #80B4FF; color:#80B4FF; background:#fff; border-radius:20px;}
			.fr-e .but:last-child{margin-right:0;}
			.money{color:#E4393C;}
			.mui-table-view{background:transparent;}
			
			
			.notlist{
				width: 100%;
				margin-top: 40%;
				text-align: center;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">我的订单</h1>
		</header>
		
		<div class="mui-content" id="probapp">
			<div class="">
				<div class=" mui-segmented-control mui-segmented-control-inverted">
				    <a class="mui-control-item mui-active" href="#item0">待发货</a>
				    <a class="mui-control-item" href="#item1">待收货</a>
				    <a class="mui-control-item" href="#item2">已收货</a>
				</div>
				<div id="mui-slider-group">
					<div class="item mui-slider-item mui-control-content mui-active" id="item0">
					</div>
					
					<div class="item mui-slider-item mui-control-content " id="item1">
					</div>
					<div class="item mui-slider-item mui-control-content " id="item2">
					</div>
					
				</div>
			</div>
			
		</div>
		
		
		
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/muishow.js">
			
		</script>
		<script type="text/javascript">
			mui.init();
		
			
			var app = new Vue({
				el:'#probapp',
				data: {
					status:"0",
					page : 1,
					list:[{time:'2018-12-6',name:'我的旅行',price:'69.00',num:'1',sum:'69.00'},
						  {time:'2018-12-6',name:'了不起的平淡',price:'69.00',num:'1',sum:'69.00'},
						  {time:'2018-12-6',name:'我的旅行',price:'69.00',num:'1',sum:'69.00'}
					]
				},
				mounted(){
					var that = this; 
					that.order("#item0");
					mui('.mui-segmented-control').on('tap', 'a', function(e) {
						let hr = this.getAttribute('href');
						console.log(hr);
						var aherf = this.getAttribute('href').split("").slice(-1)[0];
						that.status = aherf;
						that.order(hr);
					})
				
				},
				methods:{
					order(id){
						var that = this;
						let data = {
							url:"/api/Order/orderList",
							data:{
								access_token : acctoken()||"",
								page : that.page||1,
								status :that.status||""
							}
						}
						ajax(data,function(res){
							console.log(res);
							if(res.code == -1){
								mui.toast(res.message);
							}
							if(res.code == 1){
								setorder(id,res.data);
							}
						})
					},
					setorder(id,list){
						let str = ""
								if(list.length){
									list.forEach(function(item,index){
										str += `<div class="mui-table-view"><div class="dd-list ">
										<div class="fr-b"><span id="">
										2018-07-1
										</span><span id="">
										交易成功
										</span></div>
										<div class="fr-f"><div class="fimg">
										<img src="${item.product_img}"/></div>
										<div class="ftext">${item.product_name}</div><div class="fc-end">
										<span id="fr">￥69.01</span><span id="">X1</span></div></div>
										<div class="fr-e">应付金额：<span id="" class="money">￥69.00</span>
										</div><div class="fr-e">
										<button type="button" class="mui-btn mui-btn-blue m10 but">提醒发货</button>
										<button type="button" class="mui-btn mui-btn-blue m10 but">取消订单</button>
										</div></div></div>`;
										
									})
								}else{
									str = '<div class="notlist">暂无订单</div>';
								}
								$(id).html(str);
					},
				
				}
			})
			function getorder(){
			
			}
			
		</script>
	</body>

</html>